<template>
	<view class="warp">
		<!-- 顶部 start -->
		<view class="top_box" :style="box_bj.backgroundImage  ? box_bj : 'background-color:#abc7ed;'">
			<view class="top_warp">
				<!-- #ifdef WEB -->
				<view class="face">
					<image :src="userInfo.avatar" mode="aspectFit"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<button class="face_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image :src="userInfo.avatar" mode="aspectFit"></image>
					<view class="face_update">
						修改
					</view>
				</button>
				<!-- #endif -->
				<view class="warp_r">
					<view class="nickname">
						<view class="warp_bg">
							<view class="nickname_text" @click="$refs.nickname_popup.open()">
								<view class="nickname_text_view">{{userInfo.nickname}}</view>
								<view class="edit_icon">
									<uv-icon name="edit-pen" size="16"></uv-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="time">
						<view class="warp_bg" v-if="userInfo.mobile">
							{{userInfo.mobile}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 顶部 end -->
		<!-- 列表 start -->
		<view class="list_box">
			<view class="item_box" @click="jumpUrl('/pages/member/collect_course')">
				<view class="item_l">
					<view class="item_img">
						<image :src="IMG_URL+'collect.png'" mode="aspectFill"></image>
					</view>
					<view class="item_title">
						我的收藏
					</view>
				</view>
				<view class="item_r">
					<view class="item_img">
						<uv-icon name="arrow-right" color="#606266" size="16"></uv-icon>
					</view>
				</view>
			</view>
			<view class="item_box" @click="jumpUrl('/pages/member/user_test')">
				<view class="item_l">
					<view class="item_img">
						<image :src="IMG_URL+'test03.png'" mode="aspectFill"></image>
					</view>
					<view class="item_title">
						我的考试
					</view>
				</view>
				<view class="item_r">
					<view class="item_img">
						<uv-icon name="arrow-right" color="#606266" size="16"></uv-icon>
					</view>
				</view>
			</view>
			<view class="item_box" @click="jumpUrl('/pages/member/user_assign')">
				<view class="item_l">
					<view class="item_img">
						<image :src="IMG_URL+'test04.png'" mode="aspectFill"></image>
					</view>
					<view class="item_title">
						必考试卷
					</view>
					<view class="item_badge">
						<uv-badge type="error" max="99" :value="assign_num"></uv-badge>
					</view>
				</view>
				<view class="item_r">
					<view class="item_img">
						<uv-icon name="arrow-right" color="#606266" size="16"></uv-icon>
					</view>
				</view>
			</view>
			<view class="item_box" @click="wpd_status">
				<view class="item_l">
					<view class="item_img">
						<image :src="IMG_URL+'edit_password.png'" mode="aspectFill"></image>
					</view>
					<view class="item_title">
						修改密码
					</view>
				</view>
				<view class="item_r">
					<view class="item_img">
						<uv-icon name="arrow-right" color="#606266" size="16"></uv-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 end -->
		<!-- 退出登录 start -->
		<view class="login_out">
			<uv-button text="退出登录" hairline @click="login_out()"></uv-button>
		</view>
		<!-- 退出登录 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="3"></bastTabbar>
		<!-- 底部tabbar end -->
		<!-- 修改密码盒子 start -->
		<uv-popup ref="popup" mode="center" closeable :closeOnClickOverlay="false" round="5">
			<view class="edit_pwd">
				<view class="title">
					修改密码
				</view>
				<view class="i_input" v-if="this.pwdStatus==0">
					<text style="color: #f60;">第一次登录，请设置密码</text>
				</view>
				<view class="i_input" v-if="this.pwdStatus">
					<view class="i_text">
						原密码
					</view>
					<uv-input type="password" border="bottom" v-model="old_password" placeholder="请输入原密码"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						新密码
					</view>
					<uv-input type="password" border="bottom" v-model="new_password" placeholder="请输入新密码"></uv-input>
				</view>
				<view class="i_input">
					<view class="i_text">
						确认密码
					</view>
					<uv-input type="password" border="bottom" v-model="new_password2" placeholder="再次输入新密码"></uv-input>
				</view>
				<view class="i_button">
					<uv-button text="修改" type="warning" @click="edit_password"></uv-button>
				</view>
			</view>
		</uv-popup>
		<!-- 修改密码盒子 end -->
		<!-- 修改昵称 start -->
		<uv-popup ref="nickname_popup" mode="center" closeable :closeOnClickOverlay="false" round="5">
			<view class="edit_pwd">
				<view class="title">
					修改昵称
				</view>
				
				<view class="i_input">
					<view class="i_text">
						昵称：
					</view>
					<input class="weui-input" type="nickname" border="bottom" v-model="edit_nickname" @change="change_nickname" placeholder="请输入新昵称" />
				</view>
				
				<view class="i_button">
					<uv-button text="修改" type="warning" @click="save_nickname"></uv-button>
				</view>
			</view>
		</uv-popup>
		<!-- 修改昵称 end -->
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	export default {
		components: {
			bastTabbar,
		},
		onShow() {
			console.log(this.$store.getters.userInfo)
		},
		onLoad() {
			// #ifdef WEB
			this.box_bj = {
					backgroundColor: '#abc7ed',
					backgroundImage: "url('" + this.$IMG_URL + "user-top.jpg')",
					backgroundSize: 'cover',
					backgroundRepeat: 'no-repeat'
				}
			// #endif
			if(!this.userInfo){
				this.jumpUrl("/pages/member/login","reLaunch")
			}
			this.edit_nickname = this.userInfo.nickname
			this.get_mast_num()
		},
		data() {
			return {
				box_bj: {},
				new_password: '',
				new_password2: '',
				old_password: '',
				pwdStatus: 1,
				userInfo: this.$store.getters.userInfo,
				IMG_URL: this.$IMG_URL,
				edit_nickname: '',
				assign_num: 0,
			}
		},
		methods: {
			async get_mast_num() {
				const res = await this.$myRequest({
					url: "test/assign_num",
					type: "post",
					data: {},
				});
				if(res.code === 1){
					this.assign_num = res.data
				}
			},
			//----------------- 微信小程序 start -----------------//
			change_nickname(e){
				this.edit_nickname = e.detail.value
			},
			async onChooseAvatar(e) {
				console.log('e', e)
				const result = await this.uploadFilePromise(e.detail.avatarUrl)
				console.log('result', result)
				this.saveAvatar(result)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.$BASE_URL + '/api/common/upload',
						filePath: url,
						name: 'file',
						formData: {
							token: this.userInfo.token
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						},
						fail: (res) => {
							console.log('选择媒体文件失败', res.errMsg);
						}
					});
				})
			},
			async saveAvatar(result) {
				const res = await this.$myRequest({
					url: "user/avatar",
					type: "post",
					data: {
						avatar:result.data.url
					},
				});
				if (res.code) {
					this.userInfo = res.data.userInfo
					uni.setStorageSync('userInfo', res.data.userInfo)
					this.$store.commit('save_userInfo', res.data.userInfo)
				}
			},
			//----------------- 微信小程序 end -----------------//
			// 修改昵称
			async save_nickname() {
				const res = await this.$myRequest({
					url: "user/save_nickname",
					type: "post",
					data: {
						nickname: this.edit_nickname,
					},
				});
				if(res.code){
					this.$refs.nickname_popup.close();
					this.userInfo = res.data.userInfo
					uni.setStorageSync('userInfo', res.data.userInfo)
					this.$store.commit('save_userInfo', res.data.userInfo)
				}
				uni.showToast({
					icon: "none",
					title: res.msg
				})
			},
			// 修改密码
			async edit_password() {
				const res = await this.$myRequest({
					url: "user/wpd_edit",
					type: "post",
					data: {
						new_password: this.new_password,
						new_password2: this.new_password2,
						old_password: this.old_password,
					},
				});
				if(res.code){
					uni.removeStorageSync('userInfo')
					this.$store.commit('save_userInfo',{})
					uni.showToast({
						icon: "none",
						title: res.msg
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/member/login"
						})
					},1000)
				} else {
					uni.showToast({
						icon: "error",
						title: res.msg
					})
				}
			},
			// 用户退出
			login_out() {
				uni.removeStorageSync('userInfo')
				this.$store.commit('save_userInfo',{})
				uni.reLaunch({
					url: '/pages/member/login'
				})
			},
			// 密码状态
			async wpd_status() {
				const res = await this.$myRequest({
					url: "user/wpd_status",
					type: "post",
					data: {}
				});
				if(res.code){
					this.pwdStatus = res.data
					this.$refs.popup.open('center');
				}
			},
		}
	}
</script>

<style lang="scss">
	.warp{
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;
		// 顶部
		.top_box{
			display: flex;
			align-items: center;
			padding: 90rpx 20rpx;
			border-radius: 0 0 20rpx 20rpx;
			background-color: '#2380ff';
			.top_warp{
				display: flex;
				margin-left: 40rpx;
				.face {
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						border: 4rpx solid #FFF;
					}
				}
				.face_btn{
					margin: 0;
					padding: 0;
					background-color: inherit;
					position: relative;
					width: 140rpx;
					height: 140rpx;
					overflow: hidden;
					border-radius: 50%;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						border: 4rpx solid #FFF;
						box-sizing: border-box;
					}
					.face_update{
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: rgba(0, 0, 0, 0.6);
						color: #FFF;
						text-align: center;
						width: 140rpx;
						font-size: 20rpx;
						height: 40rpx;
						line-height: 40rpx;
					}
				}
				.face_btn:after{
					content: none;
					border: none;
				}
				.warp_r{
					margin-left: 40rpx;
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					.nickname{
						display: flex;
					}
					.warp_bg{
						background-color: #FFF;
						padding: 2rpx 10rpx;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						.nickname_text{
							margin-right: 10rpx;
							display: flex;
							align-items: center;
							.nickname_text_view{
								max-width: 340rpx;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.edit_icon{
								margin-left: 8rpx;
								border: 1px solid #607d8b;
							}
						}
						.weui_input{
							display: flex;
							flex-direction: row;
							.weui-input{
								color: #000;
								width: auto;
								font-size: 30rpx;
								display: inline-block;
								flex-grow: 1;
							}
						}
						
					}
				}
			}
			
		}
		// 列表
		.list_box{
			padding-top: 40rpx;
			background-color: #F1F1F5;
			font-size: 30rpx;
			.item_box{
				background-color: #FFF;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1px solid #F1F1F5;
				cursor: pointer;
				.item_l{
					display: flex;
					align-items: center;
					.item_title{
						margin-left: 20rpx;
						color: #494949;
					}
					.item_badge{
						margin-left: 8rpx;
					}
				}
				.item_r{}
				.item_img{
					width: 40rpx;height: 40rpx;
					image{
						width: 40rpx;height: 40rpx;
					}
				}
			}
		}
		// 退出
		.login_out{
			margin-top: 40rpx;
			padding: 40rpx;
		}
		// 修改密码盒子
		.edit_pwd{
			padding: 40rpx 40rpx 40rpx 40rpx;
			width: 80vw;
			.title{
				height: 60rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
			}
			.i_input{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.i_text{
					margin-right: 20rpx;
					width: 120rpx;
					text-align: right;
				}
			}
			.i_button{
				margin-top: 30rpx;
			}
		}
	}
</style>